<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div>
        <label for="">ID:
            <input type="text" v-model="id">
        </label>
        <label for="">NAME:
            <input type="text" v-model="name">
        </label>
        <label for="">
            <input type="button" value="添加" @click="add">
        </label>
    </div>
<!--    key保证数据的唯一性 进行关联-->
    <p v-for="item in list" v-bind:key="item.id">
        <input type="checkbox">
        {{item.id}}----{{item.name}}
    </p>
</div>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            list:[
                {id:1,name:'李斯'},
                {id:2,name:'嬴政'},
                {id:3,name:'赵高'},
                {id:4,name:'韩非'},
                {id:5,name:'荀子'},
            ],
            id:'',
            name:''
        },
        methods:{
            add(){
                this.list.unshift({id:this.id,name:this.name})
            }
        }
    })
</script>
</body>
</html>